<template>
  <el-container style="height:100%">
    <el-main style="padding: 0;">
      <h2 style="text-align: center">{{questionData.title}}</h2>
      <div v-html="questionData.content" style="padding: 10px"></div>
    </el-main>
    <el-aside width="500px" style="border-left: 1px black">
      <h3
        v-if="questionData.answerList === null || questionData.answerList.length < 1"
        style="text-align: center">
        当前问题暂时没有回答哦，请耐心等待~
      </h3>
      <el-container direction="vertical" style="overflow-y:scroll; height: 600px">
        <answer-item v-for="item in questionData.answerList" :answer="item" @update="getQuestionData" @openComment="handleCommentShow"></answer-item>
      </el-container>
      <div style="text-align: center; margin-top: 15px">
        <el-button type="primary" size="mini" @click="answerAddShow = true">我要回答</el-button>
      </div>
      <el-dialog :visible.sync="answerAddShow" width="70%">
        <div style="width: 100%">
          <tinymce v-model="answerData.content"></tinymce>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="answerAddShow = false">取 消</el-button>
          <el-button type="primary" @click="handleAnswerAdd">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog :visible.sync="commentListShow">
        <template slot="title">
          <el-button @click="handleCommentAddOpen" type="primary" size="mini">我要评论</el-button>
        </template>
        <el-table
        :data="commentList">
          <el-table-column
          prop="content"
          label="内容">
          </el-table-column>

          <el-table-column
          prop="createdTime"
          label="评论时间">
          </el-table-column>

          <el-table-column
          prop="createdName"
          label="评论人"></el-table-column>
        </el-table>
      </el-dialog>

      <el-dialog :visible.sync="commentAddShow">
        <el-input v-model="commentContent"></el-input>
        <el-button size="mini" style="margin-top: 10px" type="primary" @click="handleCommentSubmit">评论</el-button>
      </el-dialog>

    </el-aside>
  </el-container>
</template>

<script>
  import AnswerItem from "./components/AnswerItem";
  import Tinymce from "../../../components/Tinymce/index";
  export default {
    name: "index",
    components: {Tinymce, AnswerItem},
    data: function () {
      return {
        questionData: {
          title: "",
          content: "",
          moduleName: "",
          answerList: [],
        },
        answerAddShow: false, commentAddShow: false, commentListShow: false, commentAddShow: false,
        answerData: {
          content: "",
          questionId: null,
        },
        id: null,

        selectedAnswerId: null,

        commentContent: "",

        commentList: [],


      }
    },
    created() {
      this.id = this.$route.params.questionId != null ? this.$route.params.questionId : null;
      if (this.id === null) {
        this.$router.push({name:"QuestionPage"});
      }
      this.getQuestionData();
    },
    methods: {
      getQuestionData() {
        this.$api.questionGet(this.id).then(res => {
          this.questionData.content = res.content;
          this.questionData.title = res.title;
          this.questionData.moduleName = res.moduleName;
          this.answerData.questionId = res.id;
          this.questionData.answerList = res.answerList;
        })
      },
      handleAnswerAdd() {
        this.$api.answernAdd(this.answerData).then(res => {
          console.log(res);
          this.answerAddShow = false;
          this.getQuestionData();
        }).finally(() => {
          this.answerData.content = "";
        })
      },

      handleCommentShow(id) {
        this.selectedAnswerId = id;
        this.$api.getCommentList(id).then(res => {
          this.commentList = res;
        })
        this.commentListShow = true;
      },

      handleCommentAddOpen() {
        // console.log(11)
        this.commentAddShow = true;
      },

      handleCommentSubmit() {
        let formdata = {};
        formdata['answerId'] = this.selectedAnswerId;
        formdata['content'] = this.commentContent;
        this.$api.commentSave(formdata).then(res => {
          this.handleCommentShow(this.selectedAnswerId);
          this.getQuestionData();
          this.commentAddShow = false;
        })
      }
    }
  }
</script>

<style scoped>

</style>
